<script setup>
import { RouterLink,useRouter} from 'vue-router';
import axios from 'axios';
import { ref } from 'vue';
import { showMsg } from '@/components/Util';

let router = useRouter();
let uname = ref('')
let pwd = ref('')
let mobile = ref('')
function sub(){
    if(uname.value && pwd.value && mobile.value){
        axios.post('/api/reg',{uname:uname.value,pwd:pwd.value,mobile:mobile.value},{
            headers:{
                "Content-Type":"application/json"
            }
        }).then(res=>{
            console.log(ref)
            if(res.data.status==200){
                router.push('/')
            }else{
                showMsg(res.data.msg,'error',2000);
            }
        })
    }else{
        showMsg("表单填写不完整",'error',2000);
    }
}

</script>
<template >
<div class="box">
    <div class="title">注册账号</div>
        <input type="text" placeholder="用户名"  v-model="uname" />
        <input type="password" placeholder="密码"  v-model="pwd" />
        <input type="text" placeholder="手机号"  v-model="mobile" />
        <input type="button" value="注册"  @click="sub" />
        <span class="ww">已有帐号<router-link to="/" class="aa">登录</router-link></span>
</div>
</template>
<style scoped>
.box{
    width: 400px;
    height: 450px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background-color: #ccc;
    justify-content: space-evenly
}
.box div{
    margin: 0 auto;
    font-size: 30px;
}
.box>input{
    width: 350px;
    height: 40px;
    border: none;
    border-radius: 999px;
    margin: 0 auto;
    padding-left: 10px;
}
.aa{
    color: #000;
}
.ww{
    display: flex;
    justify-content: space-around
    
}

</style>